<template>
  <div class="flex">
    <el-radio-group v-model="type" size="large" @change="pieChange">
      <el-radio-button label="sale_">销量</el-radio-button>
      <el-radio-button label="_money">销售额</el-radio-button>
    </el-radio-group>
    <el-select
      v-model="day"
      class="m-2"
      placeholder="Select"
      size="large"
      @change="pieChange"
    >
      <el-option label="昨天" value="yesterday" />
      <el-option label="今天" value="today" />
      <el-option label="前3天" value="three_days" />
      <el-option label="前7天" value="seven_days" />
      <el-option label="前14天" value="fourteen_days" />
      <el-option label="前1个月" value="thirty_days" />
      <el-option label="前2个月" value="sixty_days" />
    </el-select>
  </div>
  <div
    id="pie"
    class="pie"
    style="height: 400px; border-bottom: 1px solid #ccc"
  ></div>
  <div class="map" id="map" style="height: 600px"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { statApi } from "./api";
import china from "@/json/china.json";
type EChartsOption = echarts.EChartsOption;
type dayEmnu =
  | "yesterday"
  | "today"
  | "three_days"
  | "seven_days"
  | "fourteen_days"
  | "thirty_days"
  | "sixty_days";
const type = ref<"sale_" | "_money">("sale_");
const day = ref<dayEmnu>("yesterday");
let pieData: SalePie[] = [];
let mapData: SaleMap[] = [];
var option: EChartsOption;
var myChart: echarts.ECharts;
const pieChange = () => {
  const key =
    type.value === "sale_" ? type.value + day.value : day.value + type.value;
  const data = pieData.map((item) => ({
    name: item.name,
    value: item[key],
  }));
  (option.series as echarts.SeriesOption[])[0].data = data;
  myChart.setOption(option);
};
const drawMap = () => {
  var mapDom = document.getElementById("map")!;
  var mapChart = echarts.init(mapDom);
  // 地图比较特殊，需要先注册json数据
  echarts.registerMap("china", china as any);
  const data = mapData.map((item) => ({
    name: item.areaName,
    value: item.saleNum,
  }));
  mapChart.setOption({
    title: {
      text: "全国销量分布图",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>销量：{c}",
      backgroundColor: "rgba(0,0,0,.6)",
      textStyle: {
        color: "#fff",
      },
    },
    visualMap: {
      min: 0,
      max: 1000000,
      text: ["High", "Low"],
      realtime: false,
      calculable: true,
      inRange: {
        color: ["purple", "hotpink", "skyblue"],
      },
    },
    series: [
      {
        type: "map",
        map: "china",
        data,
        zoom: 1.2,
        emphasis: {
          label: {
            show: false,
          },
        },
      },
    ],
  });
};
onMounted(() => {
  var chartDom = document.getElementById("pie")!;
  myChart = echarts.init(chartDom);
  statApi().then((res) => {
    pieData = res.data.salePie;
    mapData = res.data.saleMap;
    const data: any[] = pieData.map((item) => ({
      name: item.name,
      value: item.sale_yesterday,
    }));

    option = {
      // 提示组件
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(0,0,0,.6)",
        textStyle: {
          color: "#fff",
        },
        formatter: "{b}:{c}({d}%)",
      },
      legend: {
        orient: "vertical",
        right: "right",
        height: 100,
      },
      series: [
        {
          type: "pie",
          radius: ["40%", "70%"],
          data,
          label: {
            color: "inherit",
          },
        },
      ],
    };
    option && myChart.setOption(option);
    drawMap();
  });
});
</script>

<style scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
}
</style>
